<script lang="ts" setup>
import type {AnimalPreItem} from "@/types/animals";
import {AnimalConstant} from "@/constant/AnimalConstant";

defineProps<{
  uploadItem: AnimalPreItem
}>()

const {windowWidth}=uni.getSystemInfoSync()
const goDetail = (e:AnimalPreItem) => {
  const id=e.animalId
  if (Number(e.type)===AnimalConstant.BASE_TYPE_IMAGE_TEXT)
  uni.navigateTo({url: '/subPkg/detail/detail?id=' + id})
  else if (Number(e.type)===AnimalConstant.BASE_TYPE_PICTURE){
    return uni.getImageInfo({
      src: e.img!,
      success: (res) => {
        const height = windowWidth / res.width * res.height
        uni.navigateTo({
          url: '/subPkg/picDetail/picDetail?id=' + id + '&cover=' + e.img+ '&height=' + height
        })
      },
      fail: (error) => {
        uni.navigateTo({
          url: '/subPkg/picDetail/picDetail?id=' + id + '&cover=' + e.img
        })
      }
    })
  }
}
</script>

<template>
  <view class="item-box">
    <view class="top" style="width: 100%;height: 75%;position: relative" @click="goDetail(uploadItem)">
      <uv-image :src="uploadItem.img" height="100%" mode="aspectFill" radius="6%" width="100%"></uv-image>
      <view class="bg-shadeBottom flex justify-start align-center padding-left-sm"
            style="width: 100%;position: absolute;bottom: 0;height: 40px;gap: 20px">
        <view class="cuIcon-attention flex align-center justify-center" style="gap: 5px;font-size: 14px">
          <text>{{ uploadItem.viewCount }}</text>
        </view>
        <view class="cuIcon-like flex align-center justify-center" style="gap: 5px;font-size: 14px">
          <text>{{ uploadItem.likeCount }}</text>
        </view>
      </view>
    </view>
    <view class="bottom" style="width: 100%;height: 25%">
      <view class="text-black text-lg padding-sm" style="font-weight: 550">{{ uploadItem.name }}</view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.item-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  background: #fff;
  border-radius: 3%;
  overflow: hidden;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
</style>